<template>
	<div id="<myfrontIndex></myfrontIndex>" class="myfrontIndex" v-loading.fullscreen.lock="loading" element-loading-text="请喝杯咖啡稍等一下,正在加载中"
	 element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" type="flex">
		<div class="block" style="margin-bottom: 2rem;">
			<!-- 	<el-carousel height="20rem">
				<el-carousel-item v-for="item in 4" :key="item" class="banner-style">
					<div>
						<img src="../../assets/img/login-bg.jpg" width="100%" height="400rem">
					</div>
				</el-carousel-item>
			</el-carousel> -->
			<el-carousel height="20rem">
				<el-carousel-item class="banner-style">
					<span style="position: fixed;width: 100%;z-index: 9999;margin: 10% 0 0 60%;;color: white;font-size: x-large;">
					不管生活怎么样，一切都是最好的安排...</span>
					<div style="position: fixed;width: 100%;">
						<img src="../../assets/img/bannerImg/banner05.jpg" width="100%" height="400rem">
					</div>
				</el-carousel-item>
				<el-carousel-item class="banner-style">
					<span style="position: fixed;width: 100%;z-index: 9999;text-align: center;margin-top: 5.625rem;color: white;font-size: x-large;">
					无论我们如何迷茫我们都会过上我们向往的日子...</span>
					<div style="position: fixed;width: 100%;">
						<img src="../../assets/img/bannerImg/banner07.jpg" width="100%" height="400rem">
					</div>
				</el-carousel-item>
				<el-carousel-item class="banner-style">
					<span style="position: fixed;width: 100%;z-index: 9999;margin: 5.625rem 5.625rem;;color: white;font-size: x-large;">
					把握每一次机会希望与信心就会并存...</span>
					<div style="position: fixed;width: 100%;">
						<img src="../../assets/img/bannerImg/banner09.jpg" width="100%" height="400rem">
					</div>
				</el-carousel-item>
				<el-carousel-item  class="banner-style">
					<span style="position: fixed;width: 100%;z-index: 9999;margin: 5.625rem 0 0 80%;;color: white;font-size: x-large;">
					学习让生活更精彩...</span>
					<div style="position: fixed;width: 100%;">
						<img src="../../assets/img/backgroundimage/login-bg.jpg" width="100%" height="400rem">
					</div>
				</el-carousel-item>
			</el-carousel>
		</div>
		<el-row :gutter="24" class="row-bg" justify="center" type="flex">
			<el-col :span="19">
				<el-col :xs="24">
					<div class="article-div-style" v-for="articleItem in articleListData" :key="articleItem.article_id" @click="openSearch(articleItem)">
						<div class="icon-div">
							<img src="../../assets/img/icon/book12.jpg" v-if="articleItem.link_to==null||articleItem.link_to==''" class="icon-img" />
							<img :src="articleItem.link_to" v-else class="icon-img" />
						</div>
						<div class="artcle-wenben">
							<a>
								<span class="titleStyle"> <b>{{articleItem.title}}</b></span>
							</a>
							<div class="text">
								<div class="articleTextStyle">
									{{articleItem.summary}}
								</div>
								<div class="buttum_footer">
									<span>
										<span><i class="el-icon-view"></i></span>
										<span style="margin-right:0.325rem;">{{articleItem.view_count}}</span>
										<span style="margin-left:0.725rem;"><i class="el-icon-star-on"></i></span>
										<span style="margin:0 0.725rem 0 0;">{{articleItem.article_like_num}}</span>
										<i class="el-icon-date" style="margin-left: 10px;margin-right:1.25rem;">{{articleItem.create_time| formatDate}}</i>
										<template v-for='item in articleItem.meta_keywords.split(",")'>
											<el-tag type="info" style="margin-left: 0.325rem;">{{item}}</el-tag>
										</template>
									</span>

									<div style="float: right; ">
										<a style="margin-right: 5px;" @click="openSearch(articleItem)">浏览...</a>
									</div>
								</div>
							</div>
						</div>
					</div>
					<el-footer>
						<div class="pagination">
							<el-pagination @current-change="handleCurrentChange" layout="prev, pager, next" :total="total_page" :size="rows_page">
							</el-pagination>
						</div>
					</el-footer>
				</el-col>
			</el-col>

			<el-col :span="5">
				<el-card class="box-card hidden-xs-only">
					<div slot="header" class="clearfix">
						<div class="user-avator">
							<img src="../../assets/img/img.jpg">
							<div align="center" style="padding-top: 5%;">作者：自由</div>
						</div>
					</div>
					<div class="text item">
						<div><i class="el-icon-lx-read myinfo-i">文章：{{total_page}}</i><i class="el-icon-view myinfo-i">访问：{{sum_view_count}}</i></div>
						<div>
							<!-- <i class="el-icon-edit myinfo-i">评论：3</i>--><i class="el-icon-star-on myinfo-i">点赞：{{article_like_num}}</i></div>
					</div>
				</el-card>

				<el-card class="box-card topArticle hidden-xs-only">
					<div slot="header" class="clearfix topArticleTitle">
						<div class="user-avator">
							<div align="center">热门文章</div>
						</div>
					</div>
					<div class="text personTypeBody">
						<div class="topArticleRow" @click="openSearch(item)" :key="item.article_id" v-for='item in Article_top_list'>
							<span>{{item.title}}</span>
						</div>
					</div>
				</el-card>
				<el-card class="box-card personType hidden-xs-only">
					<div slot="header" class="clearfix personTypeTitle">
						<div class="user-avator">
							<div align="center">个人分类</div>
						</div>
					</div>
					<div class="text  personTypeBody">
						<div class="personTypeRow" :key="item.article_category_id" v-for='item in article_categoryOptions'>
							<a @click="openCategory(item)">
								<span>{{item.title}} </span>
								<span style="float: right;">{{item.article_count}}篇</span>
							</a>
						</div>
					</div>
				</el-card>

				<!-- <el-card class="box-card personType hidden-xs-only">
					<div slot="header" class="clearfix personTypeTitle">
						<div class="user-avator">
							<div align="center">归档</div>
						</div>
					</div>
					<div class="text personTypeBody">
						<div class="personTypeRow">
							<span>2019年8月 </span>
							<span style="float: right;">16篇</span>
						</div>
						<div class="personTypeRow">
							<span>2019年7月</span>
							<span style="float: right;">1篇</span>
						</div>
						<div class="personTypeRow">
							<span>2019年6月 </span>
							<span style="float: right;">1篇</span>
						</div>
						<div class="personTypeRow">
							<span>2019年4月 </span>
							<span style="float: right;">2篇</span>
						</div>
					</div>
				</el-card> -->

				<el-card class="box-card hidden-xs-only">
					<div slot="header" class="clearfix">
						<div class="user-avator">
							<div align="center" style="padding-top: 5%;">友情链接</div>
						</div>
					</div>
					<div class="text item">
						<div><i class="el-icon-star-on myinfo-i"><a href="https://mxdqh.top" target="_blank">自由的博客</a></i></div>
						<div><i class="el-icon-star-on myinfo-i"><a href="https://www.dusaiphoto.com" target="_blank">杜赛的个人博客</a> </i></div>
						<div><i class="el-icon-star-on myinfo-i"><a href="https://www.eastnotes.com/" target="_blank">向东的笔记本</a></i></div>
						<div></div>
					</div>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import 'quill/dist/quill.core.css';
	import 'quill/dist/quill.snow.css';
	import 'quill/dist/quill.bubble.css';
	import {
		quillEditor,
		// Quill
	} from 'vue-quill-editor';
	import * as Quill from 'quill' //引入编辑器
	import {
		constHelp
	} from '../common/contant';
	import common from '../common/common.js'
	export default {
		name: 'myfrontIndex',
		data() {
			return {
				userInfo: {},
				url: {
					get_article_list: constHelp['WEBAPIURL'] + '/blogManage/get_article_list',
					// 获取文章类型
					get_article_category_all_list: constHelp['WEBAPIURL'] + '/articleCategory/get_article_category_all_list',
				},
				articleListData: [],
				cur_page: 1, //当前页
				rows_page: 10, // 一页多少条
				total_page: 0,
				cur_item: {},
				loading: false,
				article_categoryOptions: {}, // 分类
				Article_top_list: {}, //最新文章
				sum_view_count: 0, // 访问人数
				article_like_num: 0, // 访问人数
				Archive_list: [], //归档

			};
		},
		metaInfo: {
			title: '自由的个人博客', // set a title
			meta: [{ // set meta
				name: '自由的个人博客,技术学习,在线工具,素材收集,文章浏览,java面试题，python全栈',
				content: '自由的个人博客，向往自由，希望自己的梦想可以实现，平凡的生活，在技术的海洋里让梦想启航。'
			}],
			link: [{ // set link
				rel: 'asstes',
				href: 'http://www.mxdqh.top/'
			}]
		},
		//初期化页面
		created() {
			let userInfo_string = localStorage.getItem("UserInfo");
			if (!common.IsNull(userInfo_string)) {
				this.userInfo = JSON.parse(userInfo_string);
			}
			this.get_article_list()
			this.article_category_Type_combox()
			this.getArticle_top()
			this.get_article_list_count()
		},
		filters: {
			formatDate(time) {
				var date = common.IsNull(time) ? new Date() : new Date(time);
				return common.formatDate(date, 'yyyy-MM-dd hh:mm');
			},
			formatContent(val) {
				return val;
			}
		},
		// 监听
		computed: {

		},
		methods: {
			// 分页导航
			handleCurrentChange(val) {
				this.cur_page = val;
				this.get_article_list();
			},
			//加载类型
			article_category_Type_combox() {
				this.$axios.post(this.url.get_article_category_all_list, {
					article_category_model: "1",
					user_id: this.userInfo.user_Id
				}, {
					withCredentials: true
				}).then((res) => {
					if (res.data.data != null) {
						this.article_categoryOptions = res.data.data;
					}
				})
			},
			getArticle_top() {
				this.$axios.post(this.url.get_article_list, {
					page_index: 0,
					page_size: 5,
					article_model: "1",
					user_id: this.userInfo.user_Id
				}, {
					withCredentials: true
				}).then((res) => {
					if (res.data.data != null) {
						this.Article_top_list = res.data.data;
					}
				})
			},
			// 获取用户文章列表
			get_article_list() {
				this.$axios.post(this.url.get_article_list, {
					page_index: this.cur_page,
					page_size: this.rows_page,
					selectWord: this.select_word,
					article_model: "1",
					user_id: this.userInfo.user_Id
				}, {
					withCredentials: true
				}).then((res) => {
					if (res.data.data != null) {
						this.articleListData = res.data.data;
						this.total_page = res.data.total
						this.loading = false
						// let view_count = 0
						// let article_like_num = 0
						// this.articleListData.forEach(function(data) {
						// 	if (data.view_count) {
						// 		view_count += data.view_count;
						// 	}
						// 	if (data.article_like_num) {
						// 		article_like_num += data.article_like_num;
						// 	}
						// });
						// this.article_like_num = article_like_num;
						// this.sum_view_count = view_count
					}
				})
			},
			
			// 获取用户文章列表
			get_article_list_count() {
				this.$axios.post(this.url.get_article_list, {
					page_index: 0,
					page_size: 99999999,
					article_model: "1"
				}, {
					withCredentials: true
				}).then((res) => {
						if (res.data.data != null) {
							let articleListlist = res.data.data;
							let view_count = 0
							let article_like_num = 0
							articleListlist.forEach(function(data) {
								if (data.view_count) {
									view_count += data.view_count;
								}
								if (data.article_like_num) {
									article_like_num += data.article_like_num;
								}
							});
							this.article_like_num = article_like_num;
							this.sum_view_count = view_count
						}
				})
			},
			openSearch(item) {
				let routeUrl = this.$router.resolve({
					path: '/ArticleDetail',
					name: 'ArticleDetail',
					query: {
						"article_id": item.article_id
					}
				});
				window.open(routeUrl.href, '_blank');
				// this.editVisible = 1;
				// this.cur_item = item;
			},
			openCategory(item) {
				let routeUrl = this.$router.resolve({
					path: '/Classification',
					name: 'Classification',
					query: item
				});
				window.open(routeUrl.href, '_blank');
			},
			detialtoList(visitflage) {
				this.editVisible = visitflage;
			},
		},
	};
</script>

<style>
	.myfrontIndex {
		min-height: 100px;
		min-width: 100%;
	}

	.articleTextStyle {
		max-height: 80px;
		overflow: hidden;
		margin-bottom: 10px;
	}

	.topArticleRow {
		padding: 2%;
		font-size: smaller;

	}

	.personTypeRow {
		padding: 2%;
		font-size: smaller;

	}

	.myinfo-i {
		padding: 5%;

	}

	.text {
		color: #999999;
		font-size: 11px;
	}

	.titleStyle {
		font-size: 14px;
	}

	.user-avator img {
		display: block;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		float: right;
		float: right;
		padding: 3px 0
	}


	/* 图片div */
	.icon-div {
		min-height: 5rem;
		min-width: 5rem;
		position: absolute;
	}

	.icon-img {
		height: 4rem;
		width: 4rem;
		/* border: 0.0625rem solid #666666; */
	}

	.artcle-wenben {
		padding-left: 7rem;
		padding-top: 0.1rem;
	}

	.article-div-style {
		/* height: 6rem; */
		margin: auto auto 1.5rem auto;
		border-bottom: 0.01rem solid #EBEEF5;
		padding: 10px 20px;
		border-bottom: 1px solid #EBEEF5;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		transition: All 0.4s ease-in-out;
		-webkit-transition: All 0.4s ease-in-out;
		-moz-transition: All 0.4s ease-in-out;
		-o-transition: All 0.4s ease-in-out;
	}

	.article-div-style:hover {
		box-shadow: 2px 5px 6px #EBEEF5;
		/* transform: scale(0.2);
		-webkit-transform: scale(1.05);
		-moz-transform: scale(1.05);
		-o-transform: scale(1.05);
		-ms-transform: scale(1.05); */
	}

	.el-card__header {
		padding: 10px 20px;
		border-bottom: 1px solid #EBEEF5;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	/* 走马灯 */
	.el-carousel__item h3 {
		color: #475669;
		font-size: 14px;
		opacity: 0.75;
		line-height: 150px;
		margin: 0;
	}

	.el-carousel__item:nth-child(2n) {
		background-color: #99a9bf;
	}

	.el-carousel__item:nth-child(2n+1) {
		background-color: #d3dce6;
	}
</style>
